<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>

<!--第一次调用组件-->
<div id="app">
    <model1></model1>
</div>
<!--第二次调用组件-->
<div id="app1">
    <model1></model1>
</div>
<script type="text/javascript">
    //封装全局属性model1是全局自定义的组件名称 全局组件注册以后可以被重复使用
    Vue.component("model1",{
        //模板 定义组件的html内容
        template:"<div> <h1>{{title}}</h1><button type='button' @click='ddfn'>点死我</button></div>>",
        //数据
        data:function () {
            return {
               title: "hello Value组件"
            }
        },
        //方法函数
        methods:{
            ddfn:function () {
                this.title="点不死 就往死里点"
            }
        }
    });
    //创建vue对象 绑定id叫做app的元素内容
    //绑定vue对象后组件才可以使用
    new Vue({
        el:"#app"
    });
    //创建vue对象 绑定叫做app的元素内容
    //绑定vue对象后组件才可以使用
    new Vue({
        el:"#app1"
    });
</script>
</body>
</html>